<template>
  <view class="s-canvas">
    <canvas 
      canvas-id="s-canvas" 
      :style="{ width: contentWidth + 'px', height: contentHeight + 'px' }"
    ></canvas>
  </view>
</template>

<script>
export default {
  name: "sIdentify",
  props: {
    identifyCode: {
      type: String,
      default: "1234"
    },
    fontSizeMin: {
      type: Number,
      default: 35
    },
    fontSizeMax: {
      type: Number,
      default: 35
    },
    backgroundColorMin: {
      type: Number,
      default: 180
    },
    backgroundColorMax: {
      type: Number,
      default: 240
    },
    colorMin: {
      type: Number,
      default: 50
    },
    colorMax: {
      type: Number,
      default: 160
    },
    lineColorMin: {
      type: Number,
      default: 100
    },
    lineColorMax: {
      type: Number,
      default: 200
    },
    dotColorMin: {
      type: Number,
      default: 0
    },
    dotColorMax: {
      type: Number,
      default: 255
    },
    contentWidth: {
      type: Number,
      default: 120
    },
    contentHeight: {
      type: Number,
      default: 36
    }
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    randomColor(min, max) {
      let r = this.randomNum(min, max);
      let g = this.randomNum(min, max);
      let b = this.randomNum(min, max);
      return `rgb(${r},${g},${b})`;
    },
    transparent() {
      return "rgb(255,255,255)";
    },
    drawPic() {
      const ctx = uni.createCanvasContext('s-canvas', this); // 第二个参数传入组件实例

      ctx.setTextBaseline('bottom');

      ctx.setFillStyle(this.transparent());
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);

      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i);
      }

      this.drawLine(ctx);
      this.drawDot(ctx);

      ctx.draw();
    },
    drawText(ctx, txt, i) {
      ctx.setFillStyle(this.randomColor(this.colorMin, this.colorMax));
      const fontSize = this.randomNum(this.fontSizeMin, this.fontSizeMax);
      ctx.setFontSize(fontSize);
      const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
      const minY = fontSize; 
      const maxY = this.contentHeight - 2;
      const y = this.randomNum(minY, maxY);
      const deg = this.randomNum(-10, 10);
      ctx.translate(x, y);
      ctx.rotate((deg * Math.PI) / 180);
      ctx.fillText(txt, 0, 0);
      ctx.rotate((-deg * Math.PI) / 180);
      ctx.translate(-x, -y);
    },
    drawLine(ctx) {
      for (let i = 0; i < 8; i++) {
        ctx.setStrokeStyle(this.randomColor(this.lineColorMin, this.lineColorMax));
        ctx.beginPath();
        ctx.moveTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        );
        ctx.lineTo(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight)
        );
        ctx.stroke();
      }
    },
    drawDot(ctx) {
      for (let i = 0; i < 100; i++) {
        ctx.setFillStyle(this.randomColor(this.dotColorMin, this.dotColorMax));
        ctx.beginPath();
        ctx.arc(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight),
          1,
          0,
          2 * Math.PI
        );
        ctx.fill();
      }
    }
  },
  watch: {
    identifyCode() {
      this.drawPic();
    }
  },
  onReady() {
    this.drawPic();
  }
};
</script>

<style scoped>
.s-canvas {
  /* 可根据需要调整样式 */
}
</style>